// 菜单管理
import React, { useEffect, useState, useRef } from "react";

import { Table, Space, Button, Form, Input, message, Select, Popconfirm } from "antd";
import type { TableColumnsType } from "antd";

import api from "../../api";
import { IMenu } from "../../types/login";
import { formatDateTime } from "../../utils";
import CreateDept from "./CreateDept";
const Depth: React.FC = () => {
    const [data, setData] = useState<IMenu[]>([]);
    const [loading, setLoading] = useState(false); // 加载状态
    const [form] = Form.useForm();
    const deptRef = useRef<{
        showModal: (
            type?: string,
            data?: IMenu | { parentId: string },
        ) => void,
        upData: () => void
    }>({
        showModal: () => { },
        upData: () => getDepthData()
    }); // 定义ref类型

    const columns: TableColumnsType<IMenu> = [
        {
            title: '菜单名称',
            dataIndex: 'menuName',
            key: 'menuName',
        },
        {
            title: '菜单图标',
            dataIndex: 'icon',
            key: 'icon',
        },
        {
            title: '菜单类型',
            dataIndex: 'menuType',
            key: 'menuType',
            render: (text: number) => {
                return {
                    1: '菜单',
                    2: '按钮',
                    3: '页面',
                }[text];
            },
        },
        {
            title: '权限标识',
            dataIndex: 'menuCode',
            key: 'menuCode',
        },
        {
            title: '路由地址',
            dataIndex: 'path',
            key: 'path',
        },
        {
            title: '组件名称',
            dataIndex: 'component',
            key: 'component',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            render: (text) => {
                return formatDateTime(new Date(text));
            },
        },
        {
            title: '操作',
            key: 'action',
            width: '200',
            render: (_, record) => {
                return (
                    <Space>
                        <Button
                            type="primary"
                            onClick={() => {
                                handleSubCreate(record._id);
                            }}
                        >
                            新增
                        </Button>
                        <Button
                            type="primary"
                            onClick={() => {
                                handleEdit(record);
                            }}
                        >
                            编辑
                        </Button>
                        <Popconfirm
                            title="警告"
                            description={`确认删除${record.menuName}吗？`}
                            onConfirm={() => handleDelete(record._id)}
                            okText="确认"
                            cancelText="取消"
                        >
                            <Button danger>删除</Button>
                        </Popconfirm>
                    </Space>
                );
            },
        },
    ];

    useEffect(() => {
        getDepthData();
    }, []);

    const getDepthData = async () => {
        setLoading(true);
        // 获取菜单数据
        const data = await api.getMenuList(form.getFieldsValue());
        setData(data);
        setLoading(false);
    }
    // 新增
    const handleSubCreate = (id: string) => {
        deptRef.current?.showModal('add', { parentId: id });
    }
    // 编辑
    const handleEdit = (record: IMenu) => {
        deptRef.current?.showModal('edit', record);
    }
    // 删除
    const handleDelete = async (id: string) => {
        await api.deleteMenu({ _id: id })
        message.success('删除成功');
        getDepthData();
    }
    // 新增
    const handleCreate = () => {
        deptRef.current?.showModal('add');
    }
    // 重置
    const handleReset = () => {
        form.resetFields();
        getDepthData();
    }


    return (
        <div>
            <Form className="search-form" layout="inline" form={form} initialValues={{ menuState: 1 }}>
                <Form.Item name="menuName" label="菜单名称">
                    <Input placeholder="请输入菜单名称" />
                </Form.Item>
                <Form.Item name="menuState" label="菜单状态">
                    <Select placeholder="请选择菜单状态">
                        <Select.Option value={1}>启用</Select.Option>
                        <Select.Option value={0}>禁用</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type="primary" className="mr10" onClick={getDepthData}>
                            查询
                        </Button>
                        <Button type="primary" onClick={handleReset}>
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <div className="wrap-table">
                <div className="header">
                    <div className="title">菜单列表</div>
                    <div className="action">
                        <Button onClick={handleCreate}>新增</Button>
                    </div>
                </div>
                <Table rowKey={'_id'} columns={columns} dataSource={data} loading={loading} pagination={false} />
            </div>
            <CreateDept deptRef={deptRef} upData={getDepthData} /> {/* 传递ref */}
        </div>
    );
};

export default Depth;
